<template>
  <div ref="systemMenu" class="pt-system-menu">
    <div class="menus" :style="{ width: menusWidth + 'px' }">
      <ul :style="{ width: ulWidth + 'px', marginLeft: ulMarginLeft + 'px' }">
        <li
          ref="menuItem"
          @click="clickMenu(item.name)"
          :title="item.name"
          v-for="item in list"
          :key="item.id"
        >
          <img :src="item.icon" width="55" height="48" alt="图标" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <span
      class="pt-icon left-arrow action"
      @click="scrollLeft"
      :class="{ act: canLeft }"
    ></span>
    <span
      class="pt-icon right-arrow action"
      @click="scrollRight"
      :class="{ act: canRight }"
    ></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "用户管理",
          icon: "/img/system-icons_01.png"
        },
        {
          name: "机构管理",
          icon: "/img/system-icons_02.png"
        },
        {
          name: "区域管理",
          icon: "/img/system-icons_03.png"
        },
        {
          name: "板块地区管理",
          icon: "/img/system-icons_04.png"
        },
        {
          name: "菜单管理",
          icon: "/img/system-icons_05.png"
        },
        {
          name: "参数管理",
          icon: "/img/system-icons_06.png"
        },
        {
          name: "字典管理",
          icon: "/img/system-icons_07.png"
        },
        {
          name: "关账日期管理",
          icon: "/img/system-icons_08.png"
        },
        {
          name: "操作日志",
          icon: "/img/system-icons_09.png"
        },
        {
          name: "角色管理",
          icon: "/img/system-icons_10.png"
        },
        {
          name: "日志查询",
          icon: "/img/system-icons_11.png"
        },
        {
          name: "任务信息",
          icon: "/img/system-icons_12.png"
        },
        {
          name: "预警函列",
          icon: "/img/system-icons_13.png"
        },
        {
          name: "经营状况",
          icon: "/img/system-icons_14.png"
        },
        {
          name: "编辑",
          icon: "/img/system-icons_15.png"
        }
      ],
      ulWidth: 0, // ul容器宽度
      liWidth: 0, // li宽度
      menusWidth: 0, // 菜单可见容器宽带
      ulMarginLeft: 0, // ul容器偏移值
      canLeft: false, // 左边按钮是否可用
      canRight: false // 右边按钮是否可用
    };
  },
  mounted() {
    this.layer();
    window.addEventListener("resize", this.layer);
  },
  methods: {
    clickMenu(name) {
      if (name === "编辑") {
        this.$router.push("/system/homeapp");
      }
    },
    layer() {
      const vm = this;
      const refs = vm.$refs;
      const sysMenu = refs.systemMenu;
      const itemWidth = refs.menuItem[0].clientWidth;

      vm.ulMarginLeft = 0;
      vm.liWidth = itemWidth + 16;
      vm.menusWidth = sysMenu.clientWidth - 110;
      vm.ulWidth = vm.list.length * vm.liWidth;
      vm.canRight = vm.ulWidth > vm.menusWidth;
      vm.canLeft = vm.ulMarginLeft > 0;
    },
    scrollLeft() {
      if (!this.canLeft) {
        return;
      }
      this.scroll(0);
    },
    scrollRight() {
      if (!this.canRight) {
        return;
      }
      this.scroll(1);
    },
    // dir: 0-左 1-右
    scroll(dir) {
      var vm = this;
      var len = vm.liWidth * 3; // 一次滚动多少
      var min = -(vm.ulWidth - vm.menusWidth);
      var lDis = Math.abs(min - vm.ulMarginLeft);
      var rDis = Math.abs(vm.ulMarginLeft);

      if (dir === 0) {
        if (len > rDis) {
          len = rDis;
        }
      } else if (dir === 1) {
        if (len > lDis) {
          len = lDis;
        }
        len = -len;
      }

      vm.ulMarginLeft += len;

      if (vm.ulMarginLeft <= min) {
        vm.canRight = false;
      } else {
        vm.canRight = true;
      }

      if (vm.ulMarginLeft < 0) {
        vm.canLeft = true;
      } else {
        vm.canLeft = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.pt-system-menu {
  padding: 8px 55px;
  padding-bottom: 12px;
  border-bottom: 1px solid @bgColor2;
  position: relative;
  .menus {
    overflow: hidden;
    height: 68px;
    li {
      float: left;
      width: 60px;
      text-align: center;
      cursor: pointer;
      margin-right: 8px;
      margin-left: 8px;
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: @fColor3;
      }
    }
  }
  .action {
    position: absolute;
    top: 30px;
    cursor: pointer;
    color: @bgColor2;
    &.act {
      color: @primary;
    }
  }
  .left-arrow {
    left: 21px;
  }
  .right-arrow {
    right: 21px;
  }
}
</style>
